<template>
	<section class="container">
		<!-- banner start -->
		<div id="common-banner">
			<div class="common-banner-container">
				<div class="common-banner-img">
					<img src="~/assets/images/pre-sales/banner.png">
				</div>
			</div>
		</div>
		<!-- banner end -->
		
		<!-- After sale service commitment start -->
		<div id="after_sales_wrap">
			<div class="after_sales_box">
				<div class="after_sales_title">
					<div class="after_sales_titleC">
						<h2>售后服务承诺</h2>
					</div>
					<div class="after_sales_titleE">
						<p>After sale service commitment</p>
					</div>
				</div>
				<div class="after_sales">
					<ul>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">01</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">卫诗理产品保修服务</p>
									<p class="after_sales_list_titleE">VISNEY Product warranty service</p>
								</div>
								<div class="after_sales_desc">
									<p>我们的家具严格执行国家统一规定的三包原则，一年保修终生维护，当地的经销商门店会全程跟踪您订单的服务及售后，每件产品包装中售后凭证，有任何问题可以随时联系我们的售后服务人员，旗下专卖店出售的产品均提供三包服务。</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right1.png" alt="">
								</div>
							</div>
						</li>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">02</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">卫诗理产品品质保证</p>
									<p class="after_sales_list_titleE">VISNEY Product quality assurance</p>
								</div>
								<div class="after_sales_desc">
									<p>卫诗理每个系列的家具都是全实木的，但因系列不同木头材质也有所不同。因木头的属性与纹理不同，所以适合做的家具的风格也不同。每个产品的详情页都详细的标有产品的材质信息可供参考。</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right2.png" alt="">
								</div>
							</div>
						</li>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">03</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">卫诗理产品安装问题</p>
									<p class="after_sales_list_titleE">VISNEY Problem of product installation</p>
								</div>
								<div class="after_sales_desc">
									<p>我们都配有专业的安装配送人员，为您的家具保驾护航。我们会提前24小时通知您送货的时间。方便按您的要求摆放安装</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right3.png" alt="">
								</div>
							</div>
						</li>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">04</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">卫诗理产品收货须知</p>
									<p class="after_sales_list_titleE">VISNEY Notice of product receipt</p>
								</div>
								<div class="after_sales_desc">
									<p>在您领取货时，如包装破损，就请先不要在货运单上签字，经客服确认后，请在货运单上注明。打开包装后检查，请拍摄照片做好证据。现场确认或第一时间上传给客服人员，售后人员会在三个工作日内协商处理。</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right4.png" alt="">
								</div>
							</div>
						</li>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">05</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">卫诗理产品退货问题</p>
									<p class="after_sales_list_titleE">VISNEY Product return problem</p>
								</div>
								<div class="after_sales_desc">
									<p>由于家具是特殊大件商品，又是根据您的个人需求采购或定制的，如产品无质量问题是不提供退换货服务的。所以请您在下单前详细核实您需要的家具尺寸。</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right5.png" alt="">
								</div>
							</div>
						</li>
						<li class="after_sales_list">
							<div class="after_sales_left">
								<div class="after_sales_num">06</div>
								<div class="after_sales_list_title">
									<p class="after_sales_list_titleC">运送中货物损坏怎么办</p>
									<p class="after_sales_list_titleE">How to do the damage to the goods in the delivery</p>
								</div>
								<div class="after_sales_desc">
									<p>家具安装师傅可以当场处理好的问题我们会为您提供当场处理，保证您的货物是完好无损的。如果当场不能处理的问题我们会反馈到售后部门，由售后部门安排处理。损坏严重的产品我们会为您提供退换服务。</p>
								</div>
							</div>
							<div class="after_sales_right">
								<div class="after_sales_right_img">
									<img src="~/assets/images/after-sales/after_sales_right6.png" alt="">
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- After sale service commitment  end -->
	</section>
</template>

<script>
	import axios from 'axios'
	export default {
		head () {
		  return {
		    title:this.metaData.navigationTitle,
		    meta: [
		      {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
		      {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
		    ]
		  }
		},
		async asyncData({params,store}){
		  //head信息
		    let metaData = await axios(`${store.state.wordpressAPI}/NavigationMeta/get/16`);
		  return {
		    metaData: metaData.data,
		  } 
		}
	}
</script>

<style scoped>	
	/* banner部分 */
	    #common-banner {
	        position: relative;
	        overflow: hidden;
	        width: 100%;
	        height: 600px;
	    }

	    .marginTop{
	        margin-top: 173px;
	    }

	    .common-banner-container {
	        position: relative;
	        width: 1200px;
	        height: 100%;
	        margin: 0 auto;
	    }

	    .common-banner-img {
	        position: absolute;
	        top: 0;
	        left: 50%;
	        overflow: hidden;
	        width: 1920px;
	        height: 100%;
	        margin-left: -960px;
	    }
	/* banner部分结束 */
	/*After sale service commitment start*/
		div#after_sales_wrap {
		    width:  100%;
		}

		.after_sales_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.after_sales_title {
		    width:  100%;
		    text-align:  center;
		}

		.after_sales_titleC {
		    overflow:  hidden;
		    width:  100%;
		}

		.after_sales_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 38px;
		}

		.after_sales_titleE {
			overflow: hidden;
			width: 100%;
			height: 34px;
			color: #858585;
			font-size: 14px;
			line-height: 34px;
			text-align:center;
		}

		.after_sales {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top:  140px;
		}

		.after_sales ul {
		    width:  100%;
		}

		li.after_sales_list {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding: 75px 0;
		    border-bottom: 2px solid #eae9eb;
		}

		.after_sales ul li:first-child {
		    border-top: 2px solid #eae9eb;
		}

		.after_sales_left {
		    float:  left;
		    overflow: hidden;
		    width:  600px;
		    height:  auto;
		    box-sizing: border-box;
		}

		.after_sales_right {
		    float:  right;
		    width:  600px;
		    height:  auto;
		}

		.after_sales_right_img {
		    float:  right;
		    overflow:  hidden;
		    width:  504px;
		    height: 258px;
		}

		.after_sales_num {
		    overflow:  hidden;
		    width:  100%;
		    height:  92px;
		    color: #22202b;
		    font-size:  60px;
		    font-weight:  bold;
		    line-height:  92px;
		}

		.after_sales_list_title {
		    width:  100%;
		}

		p.after_sales_list_titleC {
		    overflow:  hidden;
		    width:  100%;
		    height:  34px;
		    color:  #22202b;
		    font-size:  24px;
		    font-weight:  bold;
		    line-height:  34px;
		}

		p.after_sales_list_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 20px;
		    color: #cccccc;
		    font-size: 12px;
		    line-height: 20px;
		}

		.after_sales_desc {
		    overflow: hidden;
		    width: 100%;
		    padding-top: 13px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 18px;
		}

		.after_sales ul li:nth-child(2n) .after_sales_left {
		    float:  right;
		    padding-left: 55px;
		}

		.after_sales ul li:nth-child(2n) .after_sales_right,.after_sales ul li:nth-child(2n) .after_sales_right .after_sales_right_img {
		    float:  left;
		}
	/*After sale service commitment end*/

</style>